<template>
    <div class="Q_A">
        <p class="interpretation">以下问答内容仅指向本场考试，与其他场次的考试无关，最终解释权归天域人力集团所有。</p>
        <main class="Q_Alist">
            <div class="info" v-for="(item, index) in list" :key="index">
                <div class="dis-flex issue">
                    <div class="dis-flex issue_lfet">
                        <div class="issue_info">问：{{item.issue}}</div>
                        <div class="question_time">用户于{{item.question_time}}发问</div>
                    </div>
                    <div class="issue_right">有用 {{item.like}}</div>
                </div>
                <div class="answer">答：{{item.answer}}</div>
                <Divider />
            </div>
        </main>
        <div class="dis-flex announce">
            <Input v-model="announce" maxlength="300" show-word-limit type="textarea" :rows="4" placeholder="输入问题..." />
            <div class="announce_btn_wrapper">
                <button class="announce_btn">提问</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                announce: "",
                list: [
                    {
                        like: "1099",
                        question_time: "一天前",
                        issue: "考试需要带2B铅笔吗？",
                        answer: "笔试考试是需要带2B铅笔的，面试不需要。"
                    },
                    {
                        like: "99",
                        question_time: "三天前",
                        issue: "准考证如果丢失还能再打印吗？",
                        answer: "在考试项目于“打印准考证”阶段的时间内，请登录网站后进入准考证下载页面将准考证下载并保留文件，可重复打印。"
                    }
                ]
            }
        }
    }
</script>

<style lang="less" scoped>
.Q_A {
    font-size: 16px;
    .interpretation {
        margin-bottom: 20px;
    }
    .info {
        padding-bottom: 10px;
        .issue {
            justify-content: space-between;
            .issue_info {
                font-weight: bold;
                margin-bottom: 10px;
                font-size: 18px;
                margin-right: 20px;
            }
        }
        /deep/.ivu-divider-horizontal {
            margin: 12px 0;
        }
    }
    .announce {
        .announce_btn_wrapper {
            .announce_btn {
                position: relative;
                bottom: -64px;
                margin-left: 20px;
                font-size: 14px;
                width: 120px;
            }
        }
    }
}
</style>